<!-- 后结算模块-财务管理-销售管理-开票列表 -->
<template>
  <div class="nissin-list-box">
    <el-container class="template-box">
      <!-- tab搜索 -->
      <tabs
        is-new-tabs
        :tabs-arr="indexTabsArr"
        :active-index="activeIndex"
        @returnIndex="tabsHandle" />
      <!-- 搜索 -->
      <el-header height="auto">
        <SearchForm
          label-width="110px"
          :data="indexSearchData"
          :compact-data="indexSearchData.slice(0,3)"
          show-collapse
          @searchForm="searchForm"
          @resetForm="resetForm"
          :submit-loading='submitLoading'
        />
      </el-header>
      <!-- 列表 -->
      <el-editable
        v-loading="submitLoading"
        :data="dataList"
        height="400"
        :columns="columnsTable"
        @selection-change="handleSelectionChange"
      >
        <!-- 操作 -->
        <!-- 开票订单状态（1-待开票；2-已推送；3-已开票；4-验票完成；5-已撤销） -->
        <template
          slot="default-action"
          slot-scope="scope">
          <el-button
            v-if="[1].includes(scope.row.orderStatus) && ![1].includes(scope.row.sourceType)"
            size="small"
            @click.stop="toPush(scope.row)"
            type="text text-primary">推送</el-button>
          <el-button
            v-if="[1].includes(scope.row.orderStatus) && [1].includes(scope.row.sourceType)"
            size="small"
            @click.stop="toPush(scope.row)"
            type="text text-primary">开票</el-button>
          <el-button
            size="small"
            @click.stop="toDetails(scope.row)"
            type="text text-primary">详情</el-button>
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <pagination
        ref="page"
        :request-func="getList"
        @returnData="getTableData"
      />
    </el-container>
  </div>
</template>

<script>
import { indexSearchData, indexTableData, indexTabsArr } from './const'
import { hasIn, cloneDeep } from 'lodash'
import SearchForm from '@components/businesscomponents/search'
import ElEditable from '@components/el-editable'
import Pagination from '@components/custom-pagination'
import tabs from '@components/tabs/index.vue'
import {
  distributorInvoiceById,
  distributorInvoiceItemById,
  distributorInvoiceList,
  distributorInvoicePushOMS,
  distributorInvoiceCount,
  distributorInvoiceItemUpdate,
  pushOmsBatch
} from '@const/beforeSettleApi'
const typeData = {
  0: 'GOUKE',
  1: 'UNGOUKE'
}
export default {
  components: { ElEditable, SearchForm, tabs, Pagination },
  data () {
    return {
      changePath: `${this.$route.path}/change`,
      readPath: `${this.$route.path}/read`,
      // 搜索标题字段
      indexSearchData,
      // 搜索返回内容
      searchData: {},
      // 表格loading
      tableLoading: false,
      // 列表数据
      dataList: [],
      // 列表表头
      indexTableData,
      // tab字段
      indexTabsArr: cloneDeep(indexTabsArr),
      submitLoading: false,
      tabIndex: 1,
      activeIndex: 0,
      changeArrList: [],
      isDisabledBtn: false
    }
  },
  computed: {
    columnsTable () {
      let list = cloneDeep(this.indexTableData)
      let a = { width: '40', fixed: 'left', type: 'selection' }
      if (this.tabIndex === 1) {
        list.push(a)
      }
      return list
    }
  },
  mounted () {
    this.getNumber()
    this._globalBtns()
  },
  methods: {
    handleSelectionChange (val) {
      this.changeArrList = val
    },
    // 获取列表
    getList () {
      this.searchData.settleBeginDate = this.searchData.settleBeginDate ? this.searchData.settleBeginDate.substring(0, 10) : ''
      this.searchData.settleEndDate = this.searchData.settleEndDate ? this.searchData.settleEndDate.substring(0, 10) : ''
      this.searchData.createAtBegin = this.searchData.createAtBegin ? this.searchData.createAtBegin.substring(0, 10) : ''
      this.searchData.createAtEnd = this.searchData.createAtEnd ? this.searchData.createAtEnd.substring(0, 10) : ''
      this.submitLoading = true
      const body = {
        ...this.searchData,
        orderStatus: this.tabIndex,
        ...this.$refs.page.page
      }
      return this.$axios.$post(distributorInvoiceList, body)
    },
    // 获取列表数据
    getTableData (data) {
      this.dataList = data || []
      this.submitLoading = false
    },
    _globalBtns (index = 0) {
      let arr = [
        { type: 'primary', val: '推送选中', disabled: this.isDisabledBtn, handle: this.toMorePush }
      ]
      if (index !== 0) {
        arr = []
      }
      const btn = {
        type: 'btn',
        arr
      }
      this.$store.commit('changeLayoutHandle', btn)
    },
    // 批量推送
    toMorePush () {
      if (this.changeArrList.length === 0) {
        this.$message.warning('请勾选需要推送的订单！')
      } else {
        this.isDisabledBtn = true
        this._globalBtns()
        let list = this.changeArrList.map(item => item.invoiceId)
        this.$axios({
          method: 'post',
          url: pushOmsBatch,
          data: {
            invoiceIdList: list
          }
        }).then(res => {
          if (res.data.code === '0') {
            this.tabIndex = 2
            this.activeIndex = 1
            this.getNumber()
            this._globalBtns(this.activeIndex)
            // this.getList()
            // this.getTableData()
            this.$refs.page.Refresh()
          }
        })
          .finally(() => {
            this.isDisabledBtn = false
          // this._globalBtns()
          })
      }
    },
    // tabs切换处理事件
    tabsHandle (index) {
      this.activeIndex = index
      this._globalBtns(index)
      this.tabIndex = this.indexTabsArr[index].val || ''
      this.$refs.page.Refresh()
    },

    // 跳转详情
    toDetails (data) {
      // 已完成
      const type = [1].includes(data.sourceType) ? 1 : 0
      this.$router.push({
        path: this.readPath,
        query: {
          id: data.invoiceId,
          type: typeData[type]
        }
      })
    },
    // 推送/开票 data.sourceType: 1-非国科系公司-推送 undefined-国科系公司-开票
    toPush (data) {
      const type = [1].includes(data.sourceType) ? 1 : 0
      this.$router.push({
        path: this.changePath,
        query: {
          id: data.invoiceId,
          type: typeData[type],
          orderStatus: data.orderStatus
        }
      })
    },
    // 获取订单数量
    async getNumber () {
      const res = await this.$axios.$post(distributorInvoiceCount)
      let arr = hasIn(res, 'payload') ? res.payload : []
      const cloneIndexTabs = cloneDeep(indexTabsArr)
      cloneIndexTabs.forEach(item => {
        arr.forEach(ite => {
          if (ite.orderStatus === item.val) {
            item.badge = { value: ite.orderCount }
          }
        })
        if (item.val === 0) {
          item.badge.value = 0
          arr.forEach(ite => {
            item.badge.value += ite.orderCount
          })
          item.badge.value = item.badge.value || null
        }
      })
      this.indexTabsArr = cloneIndexTabs
    },

    // 搜索功能-点击查询
    searchForm (condition) {
      this.searchData = condition
      this.$refs.page.Refresh()
    },

    // 点击重置
    resetForm (condition) {
      this.searchData = condition
      this.$refs.page.Refresh()
    }
  }
}
</script>

<style lang="less" scoped>
@import '../m-front-common/pc/assets/var.less';
.nissin-list-box {
  background: @bgColor;
  .el-header {
    background: #fff;
    padding: 8px;
    margin-bottom: 8px;
  }
  .template-box {
    height: 100%;
    overflow: auto;
  }
}
</style>
